<template>
    <div>
      <!-- 
        阿萨斯多
       -->
      <input type="text" v-model="myVal">
      <!-- 动态绑定引入组件 -->
      <!-- <p :is='comToRender' number=78></p> -->
      <!-- 引入组件 -->
      <!-- 向子组件传值，和获取子组件返回的数据-->
      <com-a :my-value="myVal" @my-event='getMyEvent'>
        <!-- 在子组件中插入内容 并制定插入位置-->
        <p slot='header'>********** header</p>
        <p>123</p>
        <p slot='footer'>********** footer</p>
      </com-a>
      <!-- 动态组件 例如标签页切换-->
      <hr/>
      <!-- keep-alive 内置标签 缓存 -->
      <keep-alive>
        <p :is='currentView'></p>
      </keep-alive>
    </div>
</template>
<script>
import Vue from 'vue'
import ComA from './components/a'
export default {
  components: {
    ComA
  },
  data () {
    return {
      currentView: 'com-a',
      comToRender: 'com-a',
      myVal: '',
      myList: [
        {
          name: 'apple',
          price: 34
        },
        {
          name: 'banana',
          price: 50
        }
      ]
    }
  },
  // 事件监听
  watch: {
    myVal: function (val, oldVal) {
      console.log(val, oldVal)
    },
    myList: function () {
      this.tellUser()
    }
  },
  methods: {
    changeList () {
      Vue.set(this.myList, 1, {
        name: 'pinapple',
        price: 256
      })
      // this.tellUser()
    },
    removeItem () {
      // this.tellUser()
    },
    tellUser () {
      alert('list change')
    },
    getMyEvent (hello) {
      console.log('i got m event' + hello)
    }
  }
}
</script>
